<template>
  <div>
    <div class="search">
      <el-input
        class="length right"
        v-model="name"
        size="large"
        clearable
        placeholder="角色名称"
      />
      <el-button class="height" type="primary">查询</el-button>
      <el-button class="height">重置</el-button>
    </div>
    <div class="btn-new">
      <router-link to="/home/role/roleNewMember">
        <el-button type="success">新建</el-button></router-link
      >

      <el-button type="danger">删除</el-button>
    </div>
    <div>
      <el-table
        ref="multipleTableRef"
        @selection-change="handleSelectionChange"
        style="margin-left: 12px"
        border
        :data="
          state.tableData.slice(
            (currentPage4 - 1) * pageSize4,
            currentPage4 * pageSize4
          )
        "
      >
        <el-table-column type="selection" width="55" />

        <el-table-column property="name" label="角色名称" width="300" />
        <el-table-column property="statu" label="角色说明" width="300" />
        <el-table-column property="createTime" label="创建时间" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button @click="handleEdit(row)" size="small" type="success"
              >编辑</el-button
            >
            <el-button @click="handleDel(row)" size="small" type="danger"
              >删除</el-button
            ></template
          >
        </el-table-column>
      </el-table>
    </div>
    <el-footer>
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[1, 2, 3, 4]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        v-model:total="state.tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-footer>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { reactive, ref } from "vue";
import { ElMessage, ElTable } from "element-plus";
import { ElMessageBox } from "element-plus";
import { roleMember } from "../http/api";
// 后端名称
import {} from "../http/api";

const router = useRouter();
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const name = ref("");
let allList = ref();
const currentPage4 = ref(1);
const pageSize4 = ref(3);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
interface User {
  id: number;
  name: string;
  statu: null;
  createTime: string;
}
let state = reactive({
  tableData: [
    // {
    //   id: 1,
    //   roleName: "超级管理员",
    //   roleComment: "所有权限，最高权限",
    //   createTime: "",
    // },
    // {
    //   id: 2,
    //   roleName: "123",
    //   roleComment: "客服主管",
    //   createTime: "",
    // },
    // {
    //   id: 3,
    //   roleName: "1234",
    //   roleComment: "客服主管",
    //   createTime: "",
    // },
  ],
});
let list = reactive({
  limit: pageSize4,
  page: currentPage4,
});
const getList = roleMember(list)
  .then((res: any) => {
    console.log("res", res);
    if (res.code === 200) {
      state.tableData = res.data;
      // allList.value = res.count;
    }
    // console.log(tableData);
  })
  .catch((err) => {
    console.log("err.message", err.message);
    state.tableData = [];
  });

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
  console.log(val);
};
const handleEdit = (val: User) => {
  console.log(val);
  let info = JSON.stringify(val);
  router.push({
    path: "/home/role/RoleMemberInfo",
    query: { item: info },
  });
};
const handleDel = (val: User) => {
  let id = val.id;
  console.log(val);
  // console.log(tableData);
  ElMessageBox.confirm("你确定删除这个角色信息吗？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      if (val.id !== 1) {
        const index = state.tableData.findIndex((item) => item.id === val.id);
        state.tableData.splice(index, 1);
      } else {
        return;
      }
    })
    .catch(() => {});

  // 删除-接口-------------------------------------------------
  // const handleDel = (row: User) => {
  //   let params = {
  //     id: row.id,
  //   };

  // menuDelete(params).then((res) => {
  //   if (res.code == 0) {
  //     ElMessage({
  //       showClose: true,
  //       message: "操作成功",
  //       type: "success",
  //     });
  //   } else if (res.code !== 0) {
  //     ElMessage({
  //       showClose: true,
  //       message: res.msg,
  //       type: "error",
  //     });
  //   }
  // });
};

// const dialogVisible = ref(false);
// const handleClose = (done: () => void) => {
//   ElMessageBox.confirm("Are you sure to close this dialog?")
//     .then(() => {
//       done();
//     })
//     .catch(() => {
//       // catch error
//     });
// };
// let allList = ref();

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<style>
a {
  text-decoration: none;
}
.length {
  width: 200px;
}
.search {
  display: flex;
  align-items: center;
  margin: 0 0 12px 12px;
}
.right {
  margin-right: 10px;
}
.height {
  height: 38px !important;
}
.btn-new {
  text-align: left;
  padding-left: 12px;
  margin: 20px 0;
}
.btn-new .el-button {
  height: 40px;
  width: 100px;
  margin-right: 10px;
}
</style>
